<template>
	<view class="content">
		<view class="content_top">
			<view class="content_topimg">
				<image class="topimg" :src="imgurl+'logontopimg.png'" mode=""></image>
			</view>

		</view>
		<view class="content_name">
			源初宝

		</view>
		<view class="content_name">
			商家后台管理系统
		</view>
		<view class="content_infobox">
			<view class="info_top">
				<view class="phonebtn" :class="isshowlogin=='1'?'phonebtn_active':''" @click="onchangeway(1)">
					手机登录
				</view>
				<view class="zhaanghubtn" :class="isshowlogin=='2'?'phonebtn_active':''" @click="onchangeway(2)">
					账户登录
				</view>
			</view>
			<view class="phoneLoginbox" v-if="isshowlogin=='1'">
				<view class="phonetxt">
					<input type="number" :value="phone" maxlength="11" @input="onphone" class="phoneinput"
						placeholder-class="placestyle" placeholder="请输入登录手机号">
				</view>
				<view class="phonetxt1">
					<input type="number" :value="codevalue" maxlength="6" @input="oncode" class="codeinput"
						placeholder-class="placestyle" placeholder="请输入验证码">
					<view class="codebtn" @click="getCode" v-if="isshowcode">
						获取验证码
					</view>
					<view class="codebtn1" v-if="!isshowcode">
						{{count}}
					</view>
				</view>
				<view class="phonechecked">
					<checkbox-group @change="onischeckedphone">
						<checkbox :value="1" :checked="ischeckedphone" color="##FF0000" style="transform:scale(0.6)"
							class="round red" />我已阅读并同意<text class="xieyi" @click="onyonghu">《用户协议》</text>和<text
							class="xieyi" @click="onyinsi">《隐私政策》</text>
					</checkbox-group>
				</view>
				<view class="phonesubmit" @click="onLogin">
					登录
				</view>
			</view>
			<view class="phoneLoginbox" v-if="isshowlogin=='2'">
				<view class="phonetxt">
					<input type="number" :value="phonezhanghao" maxlength="11" @input="onphonezhanghao"
						class="phoneinput" placeholder-class="placestyle" placeholder="请输入登录手机号">
				</view>
				<view class="phonetxt1">
					<input :password="isshowicon" :value="password" @input="onpassword"
						class="passwardinput" placeholder-class="placestyle" placeholder="请输入密码">
						<text class="uni-icon" :class="[!isshowicon ? 'uni-eye-active' : '']"
												@click="ontoggle"></text>
			<!-- 		<view class="yanjingicon">
						<image v-show="!isshowicon" @click="ontoggle(true)" class="closeicon"
							:src="imgurl+'closepassword.png'" mode=""></image>
						<image v-show="isshowicon" @click="ontoggle(false)" class="openicon"
							:src="imgurl+'openpassword.png'" mode=""></image>
					</view> -->
				</view>
				<view class="phonechecked">
					<checkbox-group @change="onischecked">
						<checkbox value="2" :checked="ischecked" color="##FF0000" style="transform:scale(0.6)"
							class="round red" />我已阅读并同意<text class="xieyi" @click="onyonghu">《用户协议》</text>和<text
							class="xieyi" @click="onyinsi">《隐私政策》</text>
					</checkbox-group>
				</view>
				<view class="phonesubmit" @click="onLogin">
					登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		adminlogin
	} from '../../../utils/storeapp.js'
	import {
		sendSmsCode
	} from '../../../utils/app.js'
	export default {
		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				isshowlogin: '1', // 显示账号登录还是手机登录
				phone: '', // 验证码登录手机号
				phonezhanghao: '', //账号登录手机号  15373292251
				codevalue: '6666', // 验证码
				isshowcode: true, //验证码倒计时
				count: '', // 验证码倒计时时间
				ischecked: false, // 选择是否选中
				ischeckedphone: false, // 手机号是否选中
				isshowicon: true, // 眼睛小图标
				password: '', // 密码
			}
		},
		onLoad(options) {
			this.phone = uni.getStorageSync('shopphone')
			this.phonezhanghao = uni.getStorageSync('shopphone')
		},
		methods: {
			
			// 跳转到用户协议
			onyonghu(){
				uni.navigateTo({
					url:'/pages/subPack/UserAgreement/UserAgreement'
				})
			},
			// 跳转到隐私政策
			onyinsi(){
				uni.navigateTo({
					url:'/pages/subPack/PrivacyPolicy/PrivacyPolicy'
				})
			},


			// 获取验证码
			getCode() {
				sendSmsCode({
					phone: this.phone
				}).then(res => {
					console.log(res);
					// this.cartnum = res.data.all_cart_num
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.isshowcode = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
								console.log(this.count);
							} else {
								this.isshowcode = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000)
					}
				})

			},

			// 登录
			onLogin() {
				uni.login({
					success: (res) => {
						console.log(res);
						if (this.isshowlogin == 1) {
							if (this.ischeckedphone) {
								adminlogin({
									code: res.code,
									type: this.isshowlogin,
									phone: this.phone,
									sms_code: this.codevalue
								}).then(res => {
									console.log(res);
									uni.setStorageSync('shopphone', this.phone)
									uni.setStorageSync('admintoken', res.data.admin_token)
									uni.navigateTo({
										url: '/pages/subPack/business/business'
									})

								})
							} else {
								uni.showToast({
									title: '请勾选是否已阅读并同意',
									icon: 'none'
								})
							}

						} else if (this.isshowlogin == 2) {
							if (this.ischecked) {
								adminlogin({
									code: res.code,
									type: this.isshowlogin,
									phone: this.phonezhanghao,
									password: this.password
								}).then(res => {
									console.log(res);
									uni.setStorageSync('shopphone', this.phonezhanghao)
									uni.setStorageSync('admintoken', res.data.admin_token)
									uni.navigateTo({
										url: '/pages/subPack/business/business'
									})
								})
							} else {
								uni.showToast({
									title: '请勾选是否已阅读并同意',
									icon: 'none'
								})
							}

						}
					}
				})




			},
			// 账号登录是否选中
			onischecked(e) {
				console.log(e);
				if (e.detail.value[0] == '2') {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},
			// 是否选择手机号登录我同意
			onischeckedphone(e) {
				console.log(e);
				if (e.detail.value[0] == '1') {
					this.ischeckedphone = true
				} else {
					this.ischeckedphone = false
				}
			},
			// 切换眼睛图标
			ontoggle(e) {
				this.isshowicon = !this.isshowicon
			},

			// 选择登录方式
			onchangeway(e) {
				this.isshowlogin = e
			},
			//账号手机号输入
			onphonezhanghao(e) {
				this.phonezhanghao = e.detail.value
			},
			// 输入手机号
			onphone(e) {
				console.log(e);
				this.phone = e.detail.value
			},
			// 输入验证码
			oncode(e) {
				this.codevalue = e.detail.value
			},
			// 输入密码
			onpassword(e){
				this.password = e.detail.value
			},

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/storeLogin_bj.png) no-repeat;
		background-size: cover;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content_top {
		width: 132rpx;
		height: 132rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 210rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.content_topimg {
		width: 96rpx;
		height: 100rpx;
	}

	.topimg {
		width: 100%;
		height: 100%;
	}

	.content_name {
		font-size: 48rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 64rpx;
	}

	.content_infobox {
		width: 690rpx;
		height: 573rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 38rpx;
	}

	.info_top {
		width: 690rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.phonebtn {
		width: 177rpx;
		height: 90rpx;
		background: #EEEEEE;
		border-radius: 10rpx 0rpx 0rpx 0rpx;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		line-height: 90rpx;
		text-align: center;
	}

	.zhaanghubtn {
		width: 177rpx;
		height: 90rpx;
		background: #EEEEEE;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		line-height: 90rpx;
		text-align: center;
	}

	.phonebtn_active {
		background: #fff;
		font-weight: 400;
	}

	.phoneLoginbox {
		width: 100%;
		margin: 0 auto;
	}

	.phonetxt {
		width: 651rpx;
		height: 101rpx;
		background: #FFFFFF;
		border: 1px solid #333333;
		border-radius: 50rpx;
		margin-top: 41rpx;
		margin-left: 20rpx;
	}

	.phonetxt1 {
		width: 651rpx;
		height: 101rpx;
		background: #FFFFFF;
		border: 1px solid #333333;
		border-radius: 50rpx;
		margin-top: 19rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.codebtn {
		width: 260rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ef0e6c;

	}

	.codebtn1 {
		font-size: 28rpx;
		color: #BBBBBB;
		width: 260rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.xieyi {
		color: #00A0E9;
	}

	.phonechecked {
		font-size: 22rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* line-height: 15rpx; */
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-top: 16rpx;
	}

	.phonesubmit {
		width: 650rpx;
		height: 100rpx;
		background: #EF0E6C;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		margin-left: 20rpx;
		margin-top: 32rpx;
	}

	/*每个页面公共css */
	/* //设置圆角 */
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
		border-radius: 100rpx;
		border: 2rpx solid #ff0000;
	}

	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
		background-color: #ffffff !important;
		border-color: #ff0000 !important;
		color: #ff0000 !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: '\2022';
	}

	/* //元素使用的时候就是使用 round 和 red */

	.phoneinput {
		height: 101rpx;
		padding-left: 104rpx;
		position: relative;
	}

	.phoneinput::before {
		content: '';
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/phoneicon.png) no-repeat;
		background-size: contain;
		width: 34rpx;
		height: 38rpx;
		/* background: #000; */
		position: absolute;
		left: 34rpx;
		/* top: 60rpx; */
		top: 50%;
		transform: translateY(-50%);
	}

	.placestyle {
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.codeinput {
		height: 101rpx;
		padding-left: 104rpx;
		position: relative;
	}

	.codeinput::before {
		content: '';
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/yanzhengmaicon.png) no-repeat;
		background-size: contain;
		width: 34rpx;
		height: 38rpx;
		/* background: #000; */
		position: absolute;
		left: 34rpx;
		/* top: 60rpx; */
		top: 50%;
		transform: translateY(-50%);
	}

	.passwardinput {
		height: 101rpx;
		padding-left: 104rpx;
		position: relative;
	}

	.passwardinput::before {
		content: '';
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/mimaicon.png) no-repeat;
		background-size: contain;
		width: 34rpx;
		height: 38rpx;
		/* background: #000; */
		position: absolute;
		left: 34rpx;
		/* top: 60rpx; */
		top: 50%;
		transform: translateY(-50%);
	}

	.yanjingicon {
		width: 260rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.closeicon {
		width: 37rpx;
		height: 17rpx;
	}

	.openicon {
		width: 38rpx;
		height: 27rpx;
	}
	.uni-icon {
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/closepassword.png) no-repeat;
		background-size: contain;
		width: 37rpx;
		height: 17rpx;
		margin-right: 34rpx;
		/* imgurl+'closepassword.png' */
	}
	.uni-eye-active{
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/openpassword.png) no-repeat;
		background-size: contain;
		width: 38rpx;
		height: 27rpx;
		/* imgurl+'openpassword.png' */
	}
	
	
	
</style>